//导入重置样式
require("../../assets/css/reset.css");
//导入公共样式
require("../../assets/css/basic.css");
//导入标准样式
require("../../assets/css/normalize.css");
//导入iconfont.css
require("../../assets/fonts/iconfont.css");
//导入tabbar公共底部导航
require("../../assets/css/tabbar.less");
//导入navbar运动页面顶部导航
require("../../assets/css/navbar.less");
//导入样式
require("./sports_course.less");
//引入js模块
const dom = require("../../utils/dom.js");
//引入axios公共工具
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	//渲染tabbar
	dom.tabbar("sports");
	//渲染navbar
	dom.navbar("course");
	//1.获取课程列表,并渲染到页面
	axios.get("/api/train/courseList").then((res) => {
		let data = res.data.data;
		//删除数组第一个元素并返回
		let newCourse = data.shift();
		//渲染最新课程
		dom.get(".newcourse img").src = axios.defaults.baseURL + newCourse.imgurl;
		dom.get(".newcourse h4").textContent = newCourse.name;
		dom.get(".newcourse p").textContent = newCourse.desc.slice(0, 18) + "...";
		dom.get(".newcourse a").href = "sports_course_detail.html?id=" + newCourse.courseId;
		//渲染课程列表
		let html = "";
		data.forEach((v) => {
			html += `<li>
				<a href="sports_course_detail.html?id=${v.courseId}">
					<img src="${axios.defaults.baseURL + v.imgurl}" alt="" />
					<h4>${v.name}</h4>
					<p>${v.desc.slice(0, 18) + "..."}</p>
				</a>
			</li>
            `;
		});
		dom.get(".course ul").innerHTML = html;
	});
});
